<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>HTML5 canvas 动态时钟</title>
	<style>
	body{background: #318E8B; margin: 0;padding:0;}
	#center{margin: 1px auto; width:500px ;height:500px; /*border:1px solid red;*/}
	#fixed{line-height:24px;font: 24px "微软雅黑" ;text-shadow:0px 10px 2px black;color:yellow;text-align: center;}
	@media(max-width: 700px){body {background: #000;}}
	</style>
</head>
<body>
	<div id="center">
		<canvas width="500px" height="500px" id="canvas"  > 你的浏览器不支持 canvas </canvas>
	</div>
	<div id="fixed"><span id="jk"></span></div>
	<script>
	var canvas=document.getElementById("canvas");
	var cxt=canvas.getContext("2d");
	//表盘
	function draw(){
		cxt.clearRect(0,0,500,500);
		var time=new Date();
		var year=time.getFullYear();
		var month=time.getMonth()+1;
		var date=time.getDate();
		var hour=time.getHours();
		var sec=time.getSeconds();
		var min=time.getMinutes();
		var day=time.getDay();
		switch(day){
			case 0:
			d="星期日";
			break;
			case 1:d="星期一";break;
			case 2:d="星期二";break;
			case 3:d="星期三";break;
			case 4:d="星期四";break;
			case 5:d="星期五";break;
			case 6:d="星期六";break;
		}
		month=month<10?month="0"+month:month;
		date=date<10?date="0"+date:date;
		hour=hour+min/60;
		hour=hour<10?hour="0"+hour:hour
		min=min<10?min="0"+min:min;
		sec=sec<10?sec="0"+sec:sec;
		document.getElementById("jk").innerHTML=""+year+"-"+month+"-"+date+"<br/>"+parseInt(hour)+":"+min+":"+sec+"<br/>"+d;
		 //if (hour>12) {hour-12};
		hour=hour>12?hour-12:hour;//条件远算符 如果hour大于12小时 执行hour-12 否则hour=hour
		
		with(cxt){
			//lineWidth=5;
			beginPath();
			arc(250,250,200,0,360,false);
			lineCap="round";
			closePath();
			stroke();
			fill()
		}
		with(cxt){
			beginPath();
			arc(250,250,180,0,360,false);
			closePath();
			stroke();
		}
		
		///时刻度
		with(cxt){
			for (var i = 0; i < 12; i++) {
				save();
				lineWidth=8;
				strokeStyle="red";
				translate(250,250);
				rotate(i*30*Math.PI/180);
				beginPath();
				moveTo(0,-170);
				lineTo(0,-200);
				lineCap="round";
				closePath();
				stroke();
				restore();
			}
		}
		//分刻度
		with(cxt){
			for (var i = 0; i < 60; i++) {
				save();
				lineWidth=8;
				strokeStyle="green";
				translate(250,250);
				rotate(i*6*Math.PI/180);
				beginPath();
				moveTo(0,-180);
				lineTo(0,-200);
				lineCap="round";
				closePath();
				stroke();
				restore();
			}
		}
		//时针
		with(cxt){
			save();
			lineWidth=8;
			strokeStyle="red";
			translate(250,250);
			rotate(hour*30*Math.PI/180);
			beginPath();
			moveTo(0,-140);
			lineTo(0,20);
			lineCap="round";//无效果
			closePath();
			stroke();
			fillStyle="red";
			beginPath();
			arc(0,-110,15,0,360);
			closePath();
			fill();
			restore();
		}
		//分针
		with(cxt){
			save();
			lineWidth=5;
			strokeStyle="blue";
			lineCap="round";
			translate(250,250);
			rotate(min*6*Math.PI/180);
			beginPath();
			moveTo(0,-170);
			lineTo(0,25);
			closePath();
			stroke();
			fillStyle="blue";
			beginPath();
			arc(0,-140,13,0,360);
			closePath();
			fill();
			restore();
		}
		//秒钟
		with(cxt){
			save();
			strokeStyle="green";
			lineCap="round"
			translate(250,250);
			rotate(sec*6*Math.PI/180);

			beginPath();
			moveTo(0,-180);
			lineTo(0,30);
			closePath();
			stroke();

			fillStyle="green";
			beginPath();
			arc(0,0,10,0,360);
			closePath();
			fill();

			fillStyle="green";
			beginPath();
			arc(0,-150,10,0,300);
			closePath();
			fill();
			restore();

		}
	}
	draw();
	setInterval("draw()",1000);
	</script>

</body>
</html>